<template>
	<header class="header-content">
		<div class="left">
			<el-button @click="backClick" class="header-btn" icon="">
				<i class="el-icon-back icon_"></i
			></el-button>
			<el-button class="header-btn btn2"> <i class="el-icon-right icon_"></i></el-button>
			<div class="search">
				<i class="el-icon-search"></i><input type="text" placeholder="搜索喜欢的游戏、直播" />
			</div>
		</div>
		<div class="right">
			<img class="img" src="https://avatars.githubusercontent.com/u/81468415?v=4" alt="" />
			<span class="user">858577用户</span>
		</div>
		<div class="bor"></div>
	</header>
</template>

<script>
export default {
	name: "ChatHeader",
	components: {},
	props: {},
	data() {
		return {};
	},
	created() {},
	mounted() {},
	update() {},
	methods: {
		backClick() {
			this.$router.back();
		}
	},
	filter: {},
	computed: {},
	watch: {}
};
</script>

<style scoped lang="less">
.header-content {
	position: relative;
	display: flex;
	height: 83px;
	background-color: #2b2b2b;
	border-bottom: #2b2b2b 1px solid;
	overflow: hidden;
	.bor {
		position: absolute;
		bottom: 0;
		left: 137px;
		width: 80%;
		border-bottom: #505050 1px solid;
		&::before {
			content: " ";
			position: absolute;
			bottom: -1.49px;
			left: -45px;
			width: 45px;
			border-bottom: #404040 1px solid;
		}
		&::after {
			content: " ";
			position: absolute;
			bottom: -1.49px;
			right: -45px;
			width: 45px;
			border-bottom: #404040 1px solid;
		}
	}
	.left {
		width: 73%;
		height: 100%;
		border-right: 2px solid rgba(0, 0, 0, 0.5);
		.header-btn {
			position: relative;
			width: 43px;
			height: 43px;
			background: #030616;
			border-radius: 4px 4px 4px 4px;
			opacity: 1;
			border: 1px solid rgba(255, 255, 255, 0.08);
			margin: 16px 0 0 31px;
			&:hover {
				color: #fff !important;
			}
		}
		.btn2 {
			margin: 16px 0 0 18px;
		}
		.icon_ {
			position: absolute;
			font-size: 25px;
			top: 7px;
			left: 7px;
			width: 24px;
			height: 24px;
			&:hover {
				color: #fff !important;
			}
		}
		.search {
			display: inline-block;
			color: #fff;
			margin-left: 82px;
			vertical-align: middle;
			margin-top: 12px;
			input {
				background-color: transparent;
				border: 0;
				padding: 0 5px;
				color: #fff;
				outline: none;
				&::placeholder {
					color: #fff;
				}
			}
		}
	}

	.right {
		flex: 1;
		position: relative;
		text-align: right;
		.img {
			width: 43px;
			height: 43px;
			border-radius: 10px;
			margin-right: 164px;
			margin-top: 20px;
		}
		.user {
			position: absolute;
			top: 31px;
			right: 52px;
			color: #fff;
		}
	}
}
</style>
